<!--
 * @description: 暖通 预测结果
 * @author: cuicui
 * @Date: 2023-11-23 11:55:06
 * @LastEditTime: 2023-11-23 14:17:10
 * @LastEditors: cuicui
-->
<template>
  <business-layout title='历史数据' custom-title>
    <div style='height: 100%;'>
      <div style='height: 50%;'>
        <div style='height: 10%'>
          <a-row>
            <a-form :form='form2' layout='inline' @submit='handleQueryData2'>
                <h3 style='text-align: center'>热（冷）负荷预测数据</h3>
              <a-form-item label='监控点位'>
                <a-select style='width: 240px;' placeholder='请选择' @change='' v-decorator="['id']"
                          :options='selectList2'>
                </a-select>
              </a-form-item>
              <a-form-item label='开始时间'>
                <a-date-picker  v-decorator="['startTime' ]" :disabled-date='startDisabledDate2'
                                valueFormat='YYYY-MM-DD 00:00:00'
                                placeholder='请选择开始时间'
                                format='YYYY-MM-DD 00:00:00'/>
              </a-form-item>
              <a-form-item label='结束时间'>
                <a-date-picker  v-decorator="['endTime']" :disabled-date='endDisabledDate2'
                                valueFormat='YYYY-MM-DD 23:59:59'
                                placeholder='请选择结束时间'
                                format='YYYY-MM-DD 23:59:59'/>
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 90%'>
          <line-chart
            v-show='xData2.length'
            :unit='unit2'
            :loading='loading2'
            height='100%'
            width='100%'
            :id='"line3"'
            :x-data='xData2'
            :y-data='yData2'
          />
          <a-empty style='height: 100%' v-show='!xData2.length'></a-empty>
        </div>
      </div>

<!--      <div style='height: 50%;'>-->
<!--        <div style='height: 10%'>-->
<!--          <a-row>-->
<!--            <a-form :form='form' layout='inline' @submit='handleQueryData'>-->
<!--              <a-form-item>-->
<!--                <h3>太阳能集热器制热功率预测</h3>-->
<!--              </a-form-item>-->
<!--              <a-form-item>-->
<!--                <a-select style='width: 240px;' placeholder='请选择' @change='' v-decorator="['id']"-->
<!--                          :options='selectList'>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--              <a-form-item label=''>-->
<!--                <a-date-picker  v-decorator="['startTime' ]" :disabled-date='startDisabledDate'-->
<!--                              valueFormat='YYYY-MM-DD 00:00:00'
                                format='YYYY-MM-DD 00:00:00' />-->
<!--              </a-form-item>-->
<!--              <a-form-item label=''>-->
<!--                <a-date-picker  v-decorator="['endTime']" :disabled-date='endDisabledDate'-->
<!--                               valueFormat='YYYY-MM-DD 23:59:59'
                                format='YYYY-MM-DD 23:59:59' />-->
<!--              </a-form-item>-->
<!--              <a-form-item>-->
<!--                <a-button type='primary' html-type='submit'>-->
<!--                  <a-icon type='search' />-->
<!--                  查询-->
<!--                </a-button>-->
<!--              </a-form-item>-->
<!--            </a-form>-->
<!--          </a-row>-->
<!--        </div>-->
<!--        <div style='height: 90%'>-->
<!--          <line-chart-->
<!--            v-show='xData.length'-->
<!--            :unit='unit'-->
<!--            :loading='loading'-->
<!--            height='100%'-->
<!--            width='100%'-->
<!--            :id='"line1"'-->
<!--            :x-data='xData'-->
<!--            :y-data='yData'-->
<!--          />-->
<!--          <a-empty style='height: 100%' v-show='!xData.length'></a-empty>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div style='height: 50%;'>-->
<!--        <div style='height: 10%'>-->
<!--          <a-row>-->
<!--            <a-form :form='form1' layout='inline' @submit='handleQueryData1'>-->
<!--              <a-form-item>-->
<!--                <h3>太阳能集热器产热量预测</h3>-->
<!--              </a-form-item>-->
<!--              <a-form-item>-->
<!--                <a-select style='width: 240px;' placeholder='请选择' @change='' v-decorator="['id']"-->
<!--                          :options='selectList1'>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--              <a-form-item label=''>-->
<!--                <a-date-picker  v-decorator="['startTime' ]" :disabled-date='startDisabledDate1'-->
<!--                               valueFormat='YYYY-MM-DD 00:00:00'
                                format='YYYY-MM-DD 00:00:00'  />-->
<!--              </a-form-item>-->
<!--              <a-form-item label=''>-->
<!--                <a-date-picker  v-decorator="['endTime']" :disabled-date='endDisabledDate1'-->
<!--                               valueFormat='YYYY-MM-DD 23:59:59'
                                format='YYYY-MM-DD 23:59:59'/>-->
<!--              </a-form-item>-->
<!--              <a-form-item>-->
<!--                <a-button type='primary' html-type='submit'>-->
<!--                  <a-icon type='search' />-->
<!--                  查询-->
<!--                </a-button>-->
<!--              </a-form-item>-->
<!--            </a-form>-->
<!--          </a-row>-->
<!--        </div>-->
<!--        <div style='height: 90%'>-->
<!--          <line-chart-->
<!--            v-show='xData1.length'-->
<!--            :unit='unit1'-->
<!--            :loading='loading1'-->
<!--            height='100%'-->
<!--            width='100%'-->
<!--            :id='"line2"'-->
<!--            :x-data='xData1'-->
<!--            :y-data='yData1'-->
<!--          />-->
<!--          <a-empty style='height: 100%' v-show='!xData1.length'></a-empty>-->
<!--        </div>-->
<!--      </div>-->

    </div>
  </business-layout>
</template>

<script>
import moment from 'moment'
import { LineChart, BarChart } from '@/business-components/charts'
import CreateChart from '@/business-components/create-chart/index.vue'
import CreateTab from '@/business-components/create-tab/index.vue'
import HistoryChartItem from '@/business-components/history-chart-item/index.vue'
import CreatePoint from '@/business-components/create-point/index.vue'
import { getForecastSelect, getForecastData } from '@/api/forecast'

const pageType = 'history'
let mark = 0
export default {
  name: 'HistoryTime',
  mixins: [],
  components: {
    CreatePoint,
    CreateTab,
    LineChart,
    BarChart,
    CreateChart,
    HistoryChartItem
  },
  props: {},
  watch: {
    activeKey(val) {
      if (val) {
        this.findAllReportByPageId()
      }
    }
  },
  computed: {},
  data() {
    this.pageType = pageType
    return {
      activeKey: '',
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      selectList: [],
      selectList1: [],
      selectList2: [],
      menuId: '',
      myBarChart: null,
      barSpinning: true,
      visible: false,
      loading: false,
      loading1: false,
      loading2: false,
      mdl: null,
      historyTimeModel: null,
      tabs: [],
      yData: [],
      xData: [],
      yData1: [],
      xData1: [],
      yData2: [],
      xData2: [],
      legendList: [
        {
          name: '预测数据'
        },
        {
          name: '实际数据'
        }
      ],
      unit: '',
      unit1: '',
      unit2: '',
      historyVisible: false,
      confirmLoading: false,
      reportList: []
    }
  },
  created() {
    // this.getForecastSelect()
    // this.getForecastSelect1()
    this.getForecastSelect2()
  },
  methods: {
    moment,
    startDisabledDate(startValue) {
      const endValue = this.form.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate(endValue) {
      const startValue = this.form.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    startDisabledDate1(startValue) {
      const endValue = this.form1.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate1(endValue) {
      const startValue = this.form1.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    startDisabledDate2(startValue) {
      const endValue = this.form2.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate2(endValue) {
      const startValue = this.form2.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    getForecastSelect() {
      getForecastSelect({
        type: 4
      }).then(res => {
        this.selectList = res.map(item => {
          return {
            ...item,
            key: item.id,
            label: item.name
          }
        })
        if (this.selectList1 && this.selectList1.length) {
          this.form.setFieldsValue({
            'id': this.selectList[0].key
          })
        }
        this.handleQueryData()
      })
    },
    getForecastSelect1() {
      getForecastSelect({
        type: 5
      }).then(res => {
        this.selectList1 = res.map(item => {
          return {
            ...item,
            key: item.id,
            label: item.name
          }
        })
        if (this.selectList1 && this.selectList1.length) {
          this.form1.setFieldsValue({
            'id': this.selectList1[0].key
          })
        }
        this.handleQueryData1()
      })
    },
    getForecastSelect2() {
      getForecastSelect({
        type: 6
      }).then(res => {
        this.selectList2 = res.map(item => {
          return {
            ...item,
            key: item.id,
            label: item.name
          }
        })
        if (this.selectList2 && this.selectList2.length) {
          this.form2.setFieldsValue({
            'id': this.selectList2[0].key
          })
        }
        this.handleQueryData2()
      })
    },
    handleQueryData() {
      this.loading = true
      const that = this
      const values = this.form.getFieldsValue(['id', 'startTime', 'endTime'])
      getForecastData({
        type: 4,
        systemId: '',
        deviceId: '',
        ...values
      }).then(res => {
        const { dataItems, unit } = res
        this.unit = unit || 'kw'
        if (dataItems) {
          that.yData = dataItems.map(item => item.forecastValue ? Number(item.forecastValue).toFixed(2) : 0)
          that.xData = dataItems.map(item => item.forecastTime) || []
        } else {
          that.yData = []
          that.xData = []
        }
      })
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    handleQueryData1() {
      this.loading1 = true
      const that = this
      const values = this.form1.getFieldsValue(['id', 'startTime', 'endTime'])
      getForecastData({
        type: 5,
        systemId: '',
        deviceId: '',
        ...values
      }).then(res => {
        const { dataItems, unit } = res
        this.unit1 = unit || 'kw'
        if (dataItems) {
          that.yData1 = dataItems.map(item => item.forecastValue ? Number(item.forecastValue).toFixed(2) : 0)
          that.xData1 = dataItems.map(item => item.forecastTime) || []
        } else {
          that.yData1 = []
          that.xData1 = []
        }
      })
      setTimeout(() => {
        this.loading1 = false
      }, 1000)
    },
    handleQueryData2(e) {
      e.preventDefault()
      this.loading2 = true
      const that = this
      const values = this.form2.getFieldsValue(['id', 'startTime', 'endTime'])
      getForecastData({
        type: 6,
        systemId: '',
        deviceId: '',
        ...values
      }).then(res => {
        const { dataItems, unit } = res
        this.unit2 = unit || 'kw'
        if (dataItems) {
          that.yData2 = dataItems.map(item => item.forecastValue ? Number(item.forecastValue).toFixed(2) : 0)
          that.xData2 = dataItems.map(item => item.forecastTime) || []
        } else {
          that.yData2 = []
          that.xData2 = []
        }
      })
      setTimeout(() => {
        this.loading2 = false
      }, 1000)
    }
  },
  mounted() {
  },
  updated() {
  },
  destroyed() {
  }
}
</script>
<style lang='less' scoped>
h3 {
  color: rgb(54, 97, 184);
  font-weight: bold;
  font-size: 24px;
}
</style>